<template>
  <div class="order-page">
    <header class="page-header">
      <span class="back-icon">&lt;</span>
      <h1>我的订单</h1>
      <span class="refresh-icon">🔄</span>
    </header>
    <nav class="order-tabs">
      <span
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: currentTab === index }"
          @click="currentTab = index"
      >
        {{ tab }}
      </span>
    </nav>
    <div class="order-list">
      <div v-for="order in filteredOrders" :key="order.orderId" class="order-item">
        <p><strong>订单编号:</strong> {{ order.orderCode }}</p>
        <p><strong>下单时间:</strong> {{ order.orderTime }}</p>
        <p><strong>配送方式:</strong> {{ order.shippingMethod }}</p>
        <p><strong>订单状态:</strong> <span :class="'order-status-' + order.orderStatus">{{ getOrderStatusText(order.orderStatus) }}</span></p>
        <p><strong>总金额:</strong> {{ order.totalAmount }} 元</p>
        <p><strong>实付金额:</strong> {{ order.realAmount }} 元</p>
        <p><strong>收货人:</strong> {{ order.consigneeName }} ({{ order.consigneePhone }})</p>
        <p><strong>收货地址:</strong> {{ order.consigneeAddress }}</p>
        <p v-if="order.remark"><strong>备注:</strong> {{ order.remark }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderPage",
  data() {
    return {
      currentTab: 0,
      tabs: ["全部", "待付款", "待收货", "待评价"],
      orders: [
        {
          orderId: 1,
          orderCode: "ORD001",
          paymentNumber: "PAY001",
          userId: 1,
          orderTime: "Thu Feb 29 16:26:06 CST 2024",
          orderSource: 1,
          shippingMethod: "快递配送",
          orderStatus: 0,
          totalAmount: 197.78,
          realAmount: 98.89,
          consigneeName: "张三",
          consigneePhone: "13800138000",
          consigneeAddress: "北京市朝阳区",
          remark: "优先发货",
          evaluateId: 0
        },
        {
          orderId: 2,
          orderCode: "ORD002",
          paymentNumber: "PAY002",
          userId: 1,
          orderTime: "Thu Feb 29 17:00:00 CST 2024",
          orderSource: 2,
          shippingMethod: "自提点自提",
          orderStatus: 1,
          totalAmount: 145.32,
          realAmount: 145.32,
          consigneeName: "李四",
          consigneePhone: "13900139000",
          consigneeAddress: "上海市浦东新区",
          remark: "",
          evaluateId: 1
        },
        {
          orderId: 3,
          orderCode: "ORD003",
          paymentNumber: "PAY003",
          userId: 1,
          orderTime: "Fri Mar 01 09:15:30 CST 2024",
          orderSource: 3,
          shippingMethod: "自提点自提",
          orderStatus: 0,
          totalAmount: 200.00,
          realAmount: 190.00,
          consigneeName: "王五",
          consigneePhone: "13700137000",
          consigneeAddress: "广州市天河区",
          remark: "尽快发货",
          evaluateId: 0
        },
        {
          orderId: 4,
          orderCode: "ORD004",
          paymentNumber: "PAY004",
          userId: 1,
          orderTime: "Sat Mar 02 14:20:10 CST 2024",
          orderSource: 1,
          shippingMethod: "快递配送",
          orderStatus: 1,
          totalAmount: 300.00,
          realAmount: 290.00,
          consigneeName: "赵六",
          consigneePhone: "13600136000",
          consigneeAddress: "深圳市福田区",
          remark: "",
          evaluateId: 0
        },
        {
          orderId: 5,
          orderCode: "ORD005",
          paymentNumber: "PAY005",
          userId: 1,
          orderTime: "Sun Mar 03 11:05:45 CST 2024",
          orderSource: 2,
          shippingMethod: "自提点自提",
          orderStatus: 2,
          totalAmount: 150.00,
          realAmount: 150.00,
          consigneeName: "钱七",
          consigneePhone: "13500135000",
          consigneeAddress: "杭州市西湖区",
          remark: "自提方便",
          evaluateId: 1
        }
      ]
    };
  },
  computed: {
    filteredOrders() {
      switch (this.currentTab) {
        case 0:
          return this.orders;
        case 1:
          return this.orders.filter(order => order.orderStatus === 0);
        case 2:
          return this.orders.filter(order => order.orderStatus === 1);
        case 3:
          return this.orders.filter(order => order.evaluateId === 0 && order.orderStatus === 2);
        default:
          return this.orders;
      }
    }
  },
  methods: {
    getOrderStatusText(status) {
      switch (status) {
        case 0:
          return "待付款";
        case 1:
          return "待收货";
        case 2:
          return "已完成";
        default:
          return "未知状态";
      }
    },

  }
};
</script>

<style scoped>
.order-page {
  font-family: Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.back-icon {
  cursor: pointer;
}

.refresh-icon {
  cursor: pointer;
}

.order-tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.order-tabs span {
  padding: 10px;
  cursor: pointer;
}

.order-tabs span.active {
  color: red;
  border-bottom: 2px solid red;
}

.order-list {
  padding: 20px;
}

.order-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.order-status-0 {
  color: red;
}

.order-status-1 {
  color: orange;
}

.order-status-2 {
  color: green;
}
</style>